<template>
	<view>
		<view class="state-box">
			<view class="">
				<view class="headline">
					<view class="headline-left">
						{{data.machineryName}}
					</view>
				</view>
				<view class="information">
					报修人员：{{data.createBy}}
				</view>
				<view class="information">
					设备编码：{{data.machineryCode}}
				</view>
				<view class="information">
					设备Id：{{data.machineryId}}
				</view>
				<view class="information">
					维修单编号：{{data.repairCode}}
				</view>
				<view class="" style="display: flex;align-items: center;margin-bottom: 10rpx;">
					<view class="" style="opacity: 0.3;font-size: 12px;font-weight: 400;color: black;">
						紧急程度：
					</view>
					<view class="" style="display: flex;">
						<view
							:class="{FINISHED:data.urgencyDegree == '一般',VERIFYING:data.urgencyDegree == '紧急',REPAIRING:data.urgencyDegree == '非常紧急'} "
							id="state-show">
							<text>{{data.urgencyDegree}}</text>
						</view>
					</view>
				</view>
				<u-tabs @click="cut" :scrollable="false" :list="list" lineWidth="60"
					lineColor="linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%)"
					:activeStyle="{
				            color: 'rgba(56, 222, 255, 1)',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#d2d3d9',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>
		</view>
		<!-- 故障报修 -->
		<view class="" v-if="index === 0">
			<template>
				<view class="malfunction-repairs state-box" v-for="(item,index) in data.repairLineList"
					:key="item.lineId">
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="">
							<view class="" style="font-weight: 700;font-size: 32rpx;">
								报修单{{index + 1}}
							</view>
							<view class="">
								<span class="span1">维修单Id：</span><span class="span2">{{item.repairId}}</span>
							</view>
							<view class="">
								<span class="span1">维修名称：</span><span class="span2">{{item.subjectName}}</span>
							</view>
							<view class="">
								<span class="span1">创建时间：</span><span class="span2">{{data.requireDate}}</span>
							</view>
							<view class="">
								<span class="span1">故障描述：</span><span class="span2">{{item.malfunction}}</span>
							</view>
						</view>
						<view class="" v-if="data.status == 'REPAIRING'">
							<u-icon name="pushpin-fill" size="42" color="#38c9ff" @click="report(item.lineId)"></u-icon>
						</view>
					</view>
				</view>
				<!-- 完成维修按钮 -->
				<view class="achieve" @click="accept = true" v-if="data.status == 'REPAIRING'">
					完成本次维修
				</view>
			</template>
		</view>
		<!-- 确定完成维修 -->
		<u-popup :show="accept" mode="center" @close="close">
			<template>
				<view class="popup-header" style="margin-bottom: 50rpx;">
					提示
				</view>
				<image src="../../../static/images/index/gantanhao.png"
					style="width: 96rpx;height: 96rpx;margin: 0 auto;" mode=""></image>
				<view class="" style="font-size: 32rpx;text-align: center;color: #202540;margin-top: 32rpx;">
					确定完成本次维修吗?
				</view>
				<view class=""
					style="font-size: 24rpx;color: #cdced4;margin: 0 32rpx;;margin-top: 32rpx;text-align: center;">
					确定后，您将作为维修人，对保修单进行维修结果的汇报！
				</view>
				<view class="button" @click="achieve">
					确定
				</view>
			</template>
		</u-popup>
		<!-- 维修结果 -->
		<view class="" v-if="index === 1">
			<template>
				<view class="malfunction-repairs state-box" v-for="(item,index) in data.repairLineList"
					:key="item.lineId">
					<view class="">
						<view class="" style="font-weight: 700;font-size: 32rpx;">
							维修结果{{index + 1}}
						</view>
						<view class="">
							<span class="span1">故障原因：</span><span class="span2">{{item.malfunctionReason}}</span>
						</view>
						<view class="">
							<span class="span1">维修措施：</span><span class="span2">{{item.repairDes}}</span>
						</view>
						<view class="">
							<span class="span1">维修开始时间：</span><span class="span2">{{data.acceptedTime}}</span>
						</view>
						<view class="">
							<span class="span1">维修结束时间：</span><span class="span2">{{data.finishDate}}</span>
						</view>
					</view>
				</view>
			</template>
		</view>
		<!-- 维修记录 -->

		</u-empty>
		<view v-if="index === 2">
			<template>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
					v-if="stepList.length == 0"></u-empty>
				<view class="container" v-else>
					<u-steps dot direction="column" :current="active" class="stepbox">
						<u-steps-item v-for="(item,index) in stepList" :key="index">
							<view class="topbox" slot="desc">
								<view class="stepTitle">
									<view :class="item.stat=='0'?'textColor':'textColore'">{{item.opType}}</view>
									<view class="stepTitle-clor" style="">{{item.date}}</view>
								</view>
								<view class="itembox">
									<view class="d-flex u-flex-row justify-content-between">
										<view class="huise">{{item.workName}}</view>
										<view>{{item.operate}}</view>
									</view>
									<view class="font-size-sm text-color-assist item">
										<view><span class="huise">摘要：</span><span
												class="heise">{{item.abstracts}}</span>
										</view>
										<view><span class="huise">操作人员：</span><span
												class="heise">{{item.opPerson}}</span>
										</view>
										<view><span class="huise">操作时间：</span><span class="heise">{{item.opTime}}</span>
										</view>
									</view>
								</view>
							</view>
						</u-steps-item>
					</u-steps>
				</view>
			</template>
		</view>

		<!-- 维修 -->
		<u-popup :show="verify" mode="center" @close="close">
			<template>
				<view class="popup-header">
					维修
				</view>

				<view class="newRepairs-box" style="margin: 0 32rpx;">
					<u--form labelPosition="left" :model="data" ref="uForm" labelWidth="170rpx" labelAlign="right">
						<u-form-item label="故障类型：" borderBottom ref="item1" @click="shows = true">
							<u--input v-model="FormData.dictLabel" disabled disabledColor="#ffffff"
								placeholder="请选择故障类型" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="故障原因：" borderBottom ref="item1" :required="true">
							<u--textarea v-model="FormData.malfunctionReason" placeholder="请输入内容"></u--textarea>
						</u-form-item>
						<u-form-item label="维修措施：" borderBottom ref="item1" :required="true">
							<u--textarea v-model="FormData.repairDes" placeholder="请输入内容"></u--textarea>
						</u-form-item>
					</u--form>
				</view>

				<view class="two-button">
					<view class="button-left" @click="close">
						取消
					</view>
					<view class="button-right" @click="submit">
						确定
					</view>
				</view>
			</template>
		</u-popup>
		
		<!-- 故障类型 -->
		<u-popup :show="shows" mode="center" @close="cancel" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					设备
				</view>
				<view class="container">
					<u-radio-group v-model="FormData.dictValue" placement="column" shape="circle" iconPlacement="right"
						activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in Machinery" :key="index"
							:label="item.dictLabel" :name="item.dictValue">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="button">
					确定
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import {
		getDetails,
		putComplete,
		getFlow,
		putAchieve
	} from '@/api/facilityMaintain/details.js'
	import {
		getDicts
	} from "@/api/system/dict/data"
	export default {
		data() {
			return {
				shows:false,
				accept: false,
				repairId: '',
				verify: false,
				Machinery:[],
				dict: [{
					k: "0",
					y: "一般"
				}, {
					k: "1",
					y: "紧急"
				}, {
					k: "2",
					y: "非常紧急"
				}, ],
				FormData: {
					dictValue:'',//故障类型
					dictLabel:'',//故障类型名称
					repairId: '',
					malfunctionReason: '',
					repairDes: '',
					lineId: ''
				},
				data: {},
				active: '',
				index: 0,
				list: [{
					name: '故障报修',
				}, {
					name: '维修结果',
				}, {
					name: '维修记录'
				}],
				stepList: [],

			};
		},
		onLoad(options) {
			this.getDetails(options.repairId)
			this.getFlow(options.repairId)
			this.repairId = options.repairId
		},
		methods: {
			// 故障类型确定按钮
			button(){
				this.Machinery.forEach(item=>{
					if(item.dictValue == this.FormData.dictValue){
						this.FormData.dictLabel = item.dictLabel
					}
				})
				this.cancel()
			},
			cancel(){
				this.shows = false
			},
			// 完成本次维修
			achieve() {
				putAchieve(this.repairId).then(res => {
					uni.showToast({
						title: '已完成本次维修！',
						icon: 'none'
					})
					this.close()
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
			// 提交维修结果
			submit() {
				if (this.FormData.malfunctionReason.length >= 1 && this.FormData.repairDes.length >= 1) {
					putComplete(this.FormData).then(res => {
						uni.showToast({
							title: '维修结果已提交！',
							icon: 'none'
						})
						this.getDetails(this.repairId)
						this.close()
					})
				} else {
					uni.showToast({
						title: '请填写故障原因或者维修措施！',
						icon: 'none'
					})
				}
			},
			// 关闭弹出层
			close() {
				this.accept = false
				this.verify = false
				this.FormData = {
					dictValue:'',
					dictLabel:'',
					repairId: '',
					malfunctionReason: '',
					repairDes: '',
					lineId: ''
				}
				this.FormData.repairId = this.data.repairId
			},
			// 完成维修
			report(lineId) {
				this.verify = true
				this.FormData.lineId = lineId
				this.FormData.repairId = this.data.repairId
			},
			// 报修单流程
			getFlow(repairId) {
				getFlow(repairId).then(res => {
					this.stepList = res.data
					this.active = this.stepList.length
				})
			},
			// 获取详细信息
			getDetails(repairId) {
				getDetails(repairId).then(res => {
					this.dict.forEach(str => {
						if (res.data.urgencyDegree == str.k) {
							res.data.urgencyDegree = str.y
						}
					})
					this.data = res.data
				})
				// 故障类型
				getDicts('malfunction_type').then(options=>{
					console.log(options);
					this.Machinery = options.data
				})
			},
			cut(data) {
				this.index = data.index
			},
			change() {
				if (this.active < this.list2.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.state-box {

		margin: 32rpx 32rpx 48rpx 32rpx;
		padding: 48rpx 32rpx 32rpx 32rpx;
		// height: 450rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			margin-bottom: 32rpx;
		}

		.headline {
			margin-bottom: 32rpx;
			display: flex;
			justify-content: space-between;
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;

			.headline-right {
				width: 112rpx;
				height: 36rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: linear-gradient(90deg, rgba(255, 198, 128, 0.1) 0%, rgba(242, 174, 90, 0.1) 100%);

				font-size: 20rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 36rpx;
				color: rgba(255, 195, 0, 1);
				text-align: center;

			}
		}

		#state-show {
			width: 130rpx;
			height: 44rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 44rpx;

		}

		.FINISHED {
			background-color: #e7faf0;
			color: #13ce66;
		}

		.VERIFYING {
			background-color: #fff8e6;
			color: #ffba00;
		}

		.REPAIRING {
			background-color: #ffeded;
			color: #ff4949;
		}


	}

	// 故障报修样式
	.malfunction-repairs {

		view {
			margin-bottom: 32rpx;
		}

		.span1 {
			height: 30rpx;
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30rpx;
			color: rgba(32, 37, 64, 1);
			text-align: right;
		}

		.span2 {
			height: 30rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			line-height: 30rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
		}
	}

	// 步骤条样式
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.container {
		width: 100%;
		box-sizing: border-box;

		.title {
			background: #fff;
			line-height: 80rpx;
			padding-left: 20rpx;
		}

		.stepbox {
			padding: 40rpx;

			.topbox {
				width: 100%;
				padding-top: 2px;

				.stepTitle {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 26rpx;

					.stepTitle-clor {
						color: #dbd3db !important;
					}

					.textColor {
						color: #307AF0;
					}

					.textColore {
						color: #333333;
					}
				}

				.itembox {
					width: 550rpx;
					background: #fff;
					margin: 20rpx;
					display: flex;
					flex-direction: column;
					border-radius: 20rpx;
					padding: 30rpx 70rpx 30rpx 30rpx;

					.item {
						margin-top: 20rpx;
						line-height: 50rpx;

						text {
							// color: blue;

							margin-right: 6rpx;

						}
					}
				}
			}

		}

	}

	.huise {
		color: #d2d3d9 !important;
	}

	.heise {
		color: rgb(32, 37, 64) !important;
	}

	::v-deep .u-steps-item__wrapper {
		background: #E2E7F5;
		border-radius: 30rpx;
	}

	::v-deep .u-steps-item__line--column {
		height: 200rpx !important;
		top: 50rpx !important;
	}








	// -------------------------------
	// 弹出层样式
	::v-deep .u-popup__content {
		opacity: 1;
		border-radius: 10px;
		background: white;
	}

	.popup-header {
		margin: 0 32rpx 24rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);
	}

	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}

	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 160rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}

	.button {
		margin: 50rpx auto;
		width: 490rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
		font-size: 32Rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 64rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	// 俩个按钮对齐样式
	.two-button {
		margin: 48rpx 32rpx 32rpx 32rpx;
		display: flex;
		justify-content: space-between;

		view {
			width: 300rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-left {
			margin-right: 10rpx;
			border: 1px solid #38AFFF;
			color: #202540;
		}

		.button-right {
			background: linear-gradient(90deg, #38DEFF 0%, #38AFFF 100%);
			color: #FFFFFF;
		}
	}

	::v-deep .newRepairs-box {
		margin: 32rpx;
		margin-top: 0;
		opacity: 1;

		.u-icon__icon {
			color: #bfc0c7 !important;
		}
	}

	// 校验星号
	// ::v-deep .u-form-item__body__left__content__required {
	// 	left: -2rpx !important;
	// }


	::v-deep .itembox {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}


	.achieve {
		margin: 0 32rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
		opacity: 1;
		/** 文本1 */
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 60rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin-bottom: 100rpx;
	}
	
	// 多选框得边框颜色
	::v-deep .u-radio__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}
	
	::v-deep .u-radio-group--column {
		padding: 0 32rpx;
	}
	::v-deep .weizi {
		
		.u-popup__content {
			// height: 500rpx !important;
			width: 690rpx !important;
			opacity: 1;
			border-radius: 20rpx !important;
			background: white;
			border: 1px solid #38d6ff;
		}
	
		.u-radio {
			margin-bottom: 48rpx !important;
		}
	
		.button {
			margin: 38rpx auto;
			width: 490rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			font-size: 32Rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 64rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	
	}
</style>